<template>
    <div class="blockedMembers">
        <div class='moduleHead'>
            <router-link :to="{name:'privacy'}">
                <span class="back"></span>
            </router-link>
            <span>{{language.blockedMembers_title}}</span>
        </div>
        <div class="body" ref='divScrollListen'>
            <ul class="userList">
                <li v-for="(item,index) in blockUserItems">
                    <div class="avatar" @click="toUserProfile(item.usr_id,item.username)">
                        <LazyImg :src="item.icon"></LazyImg>
                        <template v-if="parseInt(item.numberofpictures) > 1">
                            <div class="photoNum"><span></span>{{ item.numberofpictures }}</div>
                            <div class="bbg"></div>
                        </template>
                    </div>
                    <button @click="unBlock(item.usr_id,item.username,index)" class="btn"> Unblock </button>
                    <div class="info">
                        <div class="name">{{item.username}}</div>
                        <div class="date">{{language.blockedMembers_blockedOn}} {{item.block_time}}
                        </div>
                    </div>
                </li>
            </ul>
            <promptTip :props="prompt"></promptTip>
            <loading :props="{show:loadingAjax || loadingList, type:loadingAjax ? 'page' : ''}"></loading>
        </div>
        <publicDialog :props="dialogData"></publicDialog>
    </div>
</template>
<script>
import globalMixin from '../common/globalMixin'
import * as API from '../api'
import LazyImg from './LazyImg'
import publicDialog from './PublicDialog'
import promptTip from './PromptTip'
import loading from './Loading'

let blockUserArr = [];

export default {

    name: 'blockedMembers',

    mixins: [globalMixin],

    components: {
        LazyImg,
        publicDialog,
        promptTip,
        loading
    },

    data() {
        return {
            dialogData: {},
            prompt: {},
            blockUserIndex: [],
            loadingList: false,
            loadingAjax: false,
            allUserLoadCompleted: false,
            condition: {
                from: 0,
                offset: 20,
            }
        }
    },

    computed: {
        blockUserItems: function() {
            let data = [];
            for (let i in this.blockUserIndex) {
                data.push(this.formatUserInfo(blockUserArr[i]));
            }
            return data;
        },
    },

    created() {
        this.defaultData = _.cloneDeep(this.$data);
    },

    activated() {
        Object.assign(this.$data, _.cloneDeep(this.defaultData));
        blockUserArr = [];
        this.getUserList();
    },

    methods: {

        formatUserInfo(userInfo) {
            let data = {};
            data.username = userInfo.username;
            data.usr_id = userInfo.usr_id;
            data.icon = this.getAvatar(userInfo.gender, userInfo.picture.icon);
            data.block_time = userInfo.block_time;
            data.numberofpictures = userInfo.numberofpictures;
            return data;
        },

        getUserList() {
            var tthis = this;
            if (!tthis.allUserLoadCompleted && !tthis.loadingList) {
                tthis.loadingList = true;
                API.who_blocked({
                    data: tthis.condition,
                    success: function(result) {
                        tthis.condition.from += tthis.condition.offset;
                        let i = blockUserArr.length;
                        blockUserArr = blockUserArr.concat(result.res);
                        for (let j = i; j < blockUserArr.length; j++) {
                            tthis.blockUserIndex.push(j);
                        };
                        if (result.res.length < tthis.condition.offset) {
                            tthis.allUserLoadCompleted = true;
                        };
                        if (tthis.allUserLoadCompleted && tthis.blockUserIndex.length == 0) {
                            tthis.prompt = {
                                type: 'default',
                                title: tthis.language.blockedMembers_noMembers,
                                content: tthis.language.blockedMembers_ifYouBlocked,
                            };
                        }
                    },
                    complete: function() {
                        tthis.loadingList = false;
                    }
                })
            }
        },

        resetBlockUser(index) {
            let tthis = this;
            blockUserArr.splice(index, 1);
            tthis.blockUserIndex = [];
            for (let i in blockUserArr) {
                tthis.blockUserIndex.push(i);
            };
        },

        toUserProfile(uid, uname) {
            this.$router.push({
                name: 'userProfile',
                query: {
                    userId: uid,
                    userName: uname,
                }
            });
        },

        unBlock(uid, uname, index) {
            var tthis = this;
            tthis.loadingAjax = true;
            API.block({
                data: {
                    prof_id: uid,
                    action: 'un_block',
                },
                success: function(result) {
                    if (result.results === 1) {
                        tthis.resetBlockUser(index);
                    } else {
                        tthis.dialogData = {
                            position: 'middle',
                            type: 'default',
                            content: {
                                info: tthis.language.unify_submitFailedTips,
                            }
                        };
                    }
                },
                complete: function() {
                    tthis.loadingAjax = false;
                }
            })
        },

        onDivBottomScroll: function(e) {
            if (this.$route.name == 'blockedMembers') {
                this.getUserList();
            }
        },
    }
}

</script>
<style scoped>
.blockedMembers {
    padding-top: 44px;
}

.blockedMembers .userList li {
    padding: 16px 20px;
    height: 60px;
    border-bottom: 1px solid #d9d9d9;
    overflow: hidden;
}

.blockedMembers .userList li:last-child {
    border-bottom: 0;
}

.blockedMembers .userList .avatar {
    float: left;
    width: 60px;
    height: 60px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 14px;
    background: url(../assets/default_avatar.png) no-repeat;
    background-size: 60px 60px;
    position: relative;
}

.blockedMembers .userList .avatar .bbg {
    content: '';
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    overflow: hidden;
    left: 0;
    top: 0;
    background: url(../assets/userlist_bbg.png) bottom center no-repeat;
}

.blockedMembers .userList .avatar .photoNum {
    height: 15px;
    line-height: 17px;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 5px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #fff;
}

.blockedMembers .userList .avatar .photoNum span {
    background: url(../assets/ico_photo.png) 0 1px no-repeat;
    background-size: 13px auto;
    padding: 0 0 0 15px;
}

.blockedMembers .userList .info {
    padding-top: 6px;
}

.blockedMembers .userList .info .date {
    font-size: 14px;
    color: #666;
}

.blockedMembers .userList button {
    float: right;
    width: 70px;
    height: 28px;
    line-height: 26px;
    margin-top: 16px;
    font-size: 13px;
    padding-left: 10px;
}

.blockedMembers {
    background-color: #f7f7f7;
}

.blockedMembers .noData {
    position: absolute;
    width: 80%;
    top: 50%;
    left: 10%;
    padding: 18px 26px;
    font-size: 15px;
    text-align: center;
    border: 1px dashed #ccc;
    border-radius: 4px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    box-sizing: border-box;
}

.blockedMembers .noData .title {
    font-size: 16px;
    padding-bottom: 10px;
}

.blockedMembers .noData .text {
    font-size: 14px;
    color: #666;
}

</style>
